<template>
  <view>
	  <u-modal :show="show" :content="content" :title="title" @confirm="confirm" :showCancelButton=true cancelText="不再展示" @cancel="modalCancel">
		  <view>
			  <view>1.点击右下角添加聊天人</view>
			  <view>2.随便输入一个名字</view>
			  <view>3.添加后,点击名字,进入聊天</view>
			  <view>4.可以输入您和某个人的聊天/进展/情况, AI将会记住并分析, 为你接下来出谋划策</view>
			  <view>5.如果您正在与多个人发展, 请创建多个聊天</view>
			</view>
	  </u-modal>
    <!-- 聊天列表 -->
    <view v-for="(item, index) in chatList" :key="index" class="list-cell" @click="detail(item.id)">
      <text class="title">{{ item.name }}</text>
      <!-- 假设有时间或其他信息 -->
    </view>

    <view class="fab-container">
      <u-button size="default" shape="circle" @click="onAddButtonClick" type="warning">
		+ 添加聊天人
      </u-button>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      chatList: [
        // { title: '聊天1' },
        // { title: '聊天2' },
        // ...更多聊天数据
      ],
	  show: false,
	  title: "爱情军师使用教程",
	  content: "123",
	  modalshow: 1
    };
  },
  onLoad() {
	  let modalshow = localStorage.getItem('modalshow');
	  console.log(modalshow);
	  if (localStorage.getItem('modalshow') == null) {
		  this.show = true;
	  }
	this.getChatList();
  },
  methods: {
	  modalCancel() {
		  localStorage.setItem('modalshow', 0);
		  this.show = false;
	  },
	  confirm() {
	  	this.show = false;
	  },
	  detail(id) {
		  uni.navigateTo({
		    url: '/pages/index/chat?id=' + id // target为目标页面的路径
		  });
	  },
    getChatList() {
		 uni.request({
		   url: 'https://data.bingdou.site/server/oneyuan/index/chatList',
		   method: 'GET',
		   data: {
		 	 open_id: localStorage.getItem('openid')
		     // ...其他可能需要的数据
		   },
		   success: (res) => {
		     // 处理服务端返回的结果
		     // if (res.statusCode === 200) {
		       // 假设服务端返回的数据格式是 { success: true, data: { ...新聊天数据 } }
		       // if (res.data.success) {
		         // this.chatList.push(res.data.data); // 将新聊天添加到列表中
		         // uni.showToast({
		         //   title: '创建成功',
		         //   icon: 'success'
		         // });
		       // } else {
		         // uni.showToast({
		           // title: '创建失败',
		           // icon: 'none'
		         // });
				 console.log(res);
		       this.chatList = res.data.data;
		   },
		   fail: () => {
		     // 请求失败的处理
		     uni.showToast({
		       title: '请求失败',
		       icon: 'none'
		     });
		   }
		 });
	},
	onAddButtonClick() {
	      // 弹出输入框让用户输入新的聊天标题
	      uni.showModal({
	        title: '新聊天',
	        editable: true, // 允许用户输入
	        placeholderText: '输入聊天标题', // 输入框的占位符
	        success: (res) => {
	          if (res.confirm && res.content) {
	            this.newChatTitle = res.content;
	            this.createChat(); // 创建聊天
	          }
	        }
	      });
	    },
	    createChat() {
	      // 调用服务端接口创建聊天
	      // 假设服务端接口地址是 '/api/create_chat'，并且接受 POST 请求
	      uni.request({
	        url: 'https://data.bingdou.site/server/oneyuan/index/addChat',
	        method: 'GET',
	        data: {
	          name: this.newChatTitle,
			  open_id: localStorage.getItem('openid')
	          // ...其他可能需要的数据
	        },
	        success: (res) => {
	          // 处理服务端返回的结果
	          // if (res.statusCode === 200) {
	            // 假设服务端返回的数据格式是 { success: true, data: { ...新聊天数据 } }
	            // if (res.data.success) {
	              // this.chatList.push(res.data.data); // 将新聊天添加到列表中
	              uni.showToast({
	                title: '创建成功',
	                icon: 'success'
	              });
	            // } else {
	              // uni.showToast({
	                // title: '创建失败',
	                // icon: 'none'
	              // });
				  this.getChatList();
	            
	        },
	        fail: () => {
	          // 请求失败的处理
	          uni.showToast({
	            title: '请求失败',
	            icon: 'none'
	          });
	        }
	      });
	    }
  },
};
</script>

<style>
/* 悬浮按钮样式 */
/* 聊天列表每行的样式 */
.list-cell {
  padding: 10px 15px; /* 内边距 */
  border-bottom: 1px solid #eee; /* 底部边框线 */
  background-color: #fff; /* 背景颜色 */
  font-size: 20px; /* 字体大小 */
  color: #333; /* 字体颜色 */
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 子元素两端对齐 */
  height: 60rpx;
}

/* 聊天列表每行的标题 */
.list-cell .title {
  flex-grow: 1; /* 占用多余的空间 */
  margin-right: 10px; /* 与右侧元素保持间距 */
}

/* 聊天列表每行的时间或其他信息 */
.list-cell .info {
  color: #999; /* 字体颜色 */
  font-size: 14px; /* 字体大小 */
}

/* 悬浮按钮样式 */
.fab-container {
  position: fixed; /* 固定位置 */
  right: 16px; /* 距离右边界16px */
  bottom: 106px; /* 距离底部16px */
  z-index: 999; /* 确保在最上层 */
  width: 40%;
}

</style>
